<template>
    <el-main v-if="isSuccess">
        <el-select
            v-model="selectedValue"
            placeholder="Select Classification Method"
            size="large"
            style="width: 240px"
            @change="handleSelectChange"
        >
            <el-option
            v-for="item in higlassOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <div ref="hgContainer" id="hg-container" style="width: 100%; height: 800px"></div>
    </el-main>
</template>

<script lang="ts" setup name="Higlass">
    import { onBeforeMount, ref, reactive, onMounted } from 'vue';
    import { get, post, getHiglass, postHiglass } from '@/axios/api';
    import { useRoute } from 'vue-router';
    import 'higlass/dist/hglib.css';    
    import { viewer } from 'higlass'
    import viewConfig from '../dataConfigs/config'
    import { experimentIndex } from '../dataConfigs/index'
    import { ElMessage } from 'element-plus'

    let selectedValue = ref('')
    let hgContainer = ref(null)
    let higlassOptions: any = ref('')
    const route = useRoute()
    const props = defineProps(['gse', 'experimentType', 'sampleType'])
    let isSuccess = ref(true)

    async function getHiglassId() {
        let filename = experimentIndex[props.experimentType] + '_' + props.gse + '_' +  props.sampleType.replaceAll(' ', '_')
        let res:any = await getHiglass('uids_by_filename', {d: filename})
        console.log(res)
        if (res && res.results.length > 0) {
            isSuccess.value = true
            selectedValue.value = res.results[0].uuid
            viewConfig.views[0].tracks.center[0].contents[0].tilesetUid = res.results[0].uuid
            const cfg = reactive(JSON.parse(JSON.stringify(viewConfig)))
            if (props.experimentType === 'sn-m3C' && props.sampleType == 'Human frontal cortex') {
                const resp:any = await getHiglass('tilesets', {limit: 10000});
                const gene = resp.results.find(t => t.name === 'gene-annotations-hg19');
                cfg.views[0].autocompleteSource = `/api/v1/suggest/?d=${gene.uuid}`
                cfg.views[0].genomePositionSearchBox = {
                    autocompleteServer: "http://scnucleome.com/api/v1",
                    autocompleteId: gene.uuid,
                    chromInfoServer: "http://scnucleome.com/api/v1",
                    chromInfoId: "hg19",
                    visible: true
                }
                cfg.views[0].tracks.top = [
                    {
                        type: "horizontal-gene-annotations", // 基因注释的 track type
                        height: 80,
                        tilesetUid: gene.uuid, // ← 这里填你导入后得到的 UUID
                        server: "http://scnucleome.com/api/v1",
                        options: {
                            labelPosition: "bottomRight", // 可选：label 显示位置
                        },
                        name: "Gene Annotations (hg19)",
                    },
                ]
            }
            const hgv = viewer(
                hgContainer.value,
                cfg,
                { bounded: true },
            );
            higlassOptions.value = res.results.map((ele: {name: String, uuid: String}) => {
                let list = ele.name.split('_')
                let name = 'Leiden_' + list[list.length - 1].replace('.mcool', '')
                return {label: name, value: ele.uuid}
            })
        } else {
            isSuccess.value = false
            ElMessage({
                message: 'mcool file does not exist',
                type: 'error',
            })
        }
    }

    function handleSelectChange(val:any) {
        viewConfig.views[0].tracks.center[0].contents[0].tilesetUid = val
        const hgv = viewer(
            hgContainer.value,
            viewConfig,
            { bounded: true },
        );
    }


    onMounted(() => {
        getHiglassId()
    })

</script>

<style scoped>
</style>